<template>
  <div>
    <!-- 封面 -->
    <div class="bg-wrap my-animation-slide-top">
      <!-- 背景图片 -->
      <el-image class="love-image my-el-image"
                lazy
                src="http://www.starhert.top:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png"
                fit="cover">
        <div slot="error" class="image-slot"></div>
      </el-image>

      <!-- 对象 -->
      <div class="love-wrap transformCenter">
        <div>
          <el-avatar class="love-avatar" src="http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg"></el-avatar>
          <div class="love-title">
            {{love.manName}}
          </div>
        </div>
        <div>
          <img class="love-img" :src="like" alt="心心">
        </div>
        <div>
          <el-avatar class="love-avatar" src="http://www.starhert.top:9000/blog/2024/12/22/4be6a42eca1549db9febbc5ba9424945.jpg"></el-avatar>
          <div class="love-title">
            {{love.womanName}}
          </div>
        </div>
      </div>

      <div id="bannerWave1"></div>
      <div id="bannerWave2"></div>
    </div>

    <!-- 内容 -->
    <div class="love-container">
      <div class="myCenter love-content">
        <!-- 时间 -->
        <div>
          <!-- 计时 -->
          <div>
            <div class="love-time-title1">
              家有爱宠
            </div>
            <div class="love-time1">
              第
              <span class="love-time1-item">{{timing.year}}</span>
              年
              <span class="love-time1-item">{{timing.month}}</span>
              月
              <span class="love-time1-item">{{timing.day}}</span>
              日
              <span class="love-time1-item">{{timing.hour}}</span>
              时
              <span class="love-time1-item">{{timing.minute}}</span>
              分
              <span class="love-time1-item">{{timing.second}}</span>
              秒
            </div>
          </div>
          <!-- 倒计时 -->
          <div class="love-time-title2"
               v-if="!$common.isEmpty(love.countdownTitle) || !$common.isEmpty(love.countdownTime)">
            {{love.countdownTitle}}: {{countdownChange}}
          </div>
        </div>
      </div>
      {{card}}
      <div style="padding: 0 20px">
        <div class="family-button shadow-box-mini" @click="changeCard(4)">
          <span class="family-button-title">飞书传信</span>
          <span class="family-button-car">
            <svg viewBox="0 0 1024 1024" width="40" height="40">
                <path
                  d="M399.502 655.103c0 7.902-6.665 14.311-14.88 14.311H72.188c-8.215 0-14.875-6.407-14.875-14.311v-28.634c0-7.913 6.66-14.315 14.875-14.315h312.435c8.217 0 14.88 6.402 14.88 14.315l-0.001 28.634zM968.167 655.103c0 7.902-6.664 14.311-14.882 14.311H640.851c-8.216 0-14.877-6.407-14.877-14.311v-28.634c0-7.913 6.661-14.315 14.877-14.315h312.436c8.218 0 14.882 6.402 14.882 14.315l-0.002 28.634z"
                  fill="#EA0606"></path><path
              d="M968.097 624.008c0 11.563-17.723 20.937-39.583 20.937H97.263c-21.858 0-39.579-9.372-39.579-20.937v-41.876c0-11.562 17.72-20.935 39.579-20.935h831.25c21.86 0 39.583 9.373 39.583 20.935v41.876zM855.003 526.553h-12c0-161.793-151.025-293.421-336.66-293.421-185.633 0-336.656 131.628-336.656 293.421h-12c0-41.334 9.261-81.425 27.527-119.161 17.612-36.384 42.807-69.046 74.886-97.079 65.813-57.509 153.264-89.181 246.243-89.181 92.981 0 180.434 31.672 246.247 89.181 32.079 28.032 57.274 60.693 74.887 97.079 18.264 37.734 27.526 77.826 27.526 119.161z"
              fill="#EA0606"></path><path
              d="M1001.996 588.091c-121.146 13.91-980.875 0-980.875 0s-30.62-203.887 241.944-144.555c171.281-1.178 273.436 0 489.644 0 193.07-59.332 283.186 108.642 249.287 144.555z"
              fill="#EA0606"></path><path
              d="M500.343 214.379h12v330.342h-12z"
              fill="#EA0606"></path><path
              d="M333.217 657.192c0 46.174-38.961 83.602-87.029 83.602-48.056 0-87.021-37.428-87.021-83.602 0-46.172 38.963-83.588 87.021-83.588 48.067 0 87.029 37.417 87.029 83.588z"
              fill="#FFFFFF"></path><path
              d="M246.188 743.794c-49.638 0-90.021-38.85-90.021-86.602 0-47.745 40.383-86.588 90.021-86.588 49.642 0 90.029 38.843 90.029 86.588 0 47.752-40.387 86.602-90.029 86.602z m0-167.19c-46.329 0-84.021 36.151-84.021 80.588 0 44.444 37.692 80.602 84.021 80.602 46.333 0 84.029-36.157 84.029-80.602 0-44.436-37.696-80.588-84.029-80.588z"
              fill="#440A0A"></path><path
              d="M309.872 656.757c0 33.159-27.986 60.035-62.491 60.035-34.51 0-62.487-26.876-62.487-60.035 0-33.16 27.977-60.022 62.487-60.022 34.505 0.001 62.491 26.862 62.491 60.022z"
              fill="#440A0A"></path><path
              d="M271.322 657.558c0 11.747-9.918 21.282-22.151 21.282-12.237 0-22.152-9.535-22.152-21.282 0-11.758 9.916-21.277 22.152-21.277 12.233-0.002 22.151 9.519 22.151 21.277z"
              fill="#FFFFFF"></path><path
              d="M875.521 642.811c0 46.175-38.963 83.603-87.027 83.603-48.061 0-87.021-37.428-87.021-83.603 0-46.173 38.962-83.587 87.021-83.587 48.066 0 87.027 37.414 87.027 83.587z"
              fill="#FFFFFF"></path><path
              d="M788.494 729.413c-49.638 0-90.021-38.85-90.021-86.602 0-47.745 40.383-86.588 90.021-86.588 49.646 0 90.029 38.843 90.029 86.588 0 47.752-40.384 86.602-90.029 86.602z m0-167.19c-46.329 0-84.021 36.151-84.021 80.588 0 44.444 37.692 80.602 84.021 80.602 46.334 0 84.027-36.157 84.027-80.602 0-44.436-37.693-80.588-84.027-80.588z"
              fill="#440A0A"></path><path
              d="M852.178 642.377c0 33.159-27.986 60.035-62.488 60.035-34.509 0-62.487-26.876-62.487-60.035 0-33.16 27.978-60.021 62.487-60.021 34.502 0 62.488 26.861 62.488 60.021z"
              fill="#440A0A"></path><path
              d="M813.629 643.178c0 11.748-9.918 21.284-22.15 21.284-12.239 0-22.151-9.536-22.151-21.284s9.913-21.275 22.151-21.275c12.233 0 22.15 9.527 22.15 21.275z"
              fill="#FFFFFF"></path></svg>
          </span>
        </div>
      </div>
    </div>

    <div class="card-wrap myCenter my-animation-slide-top" v-show="card !== 4">
      <div class="card-wrap" v-show="card !== 4">
        <div class="card-content shadow-box-mini" >
          <div>
            <el-avatar :size="100"
                       src="http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg">
            </el-avatar>
          </div>
          <div class="card-right">
            <div class="card-title">
              点点滴滴
            </div>
            <div class="card-desc">
              ☀️今朝有酒今朝醉
            </div>
          </div>
        </div>

        <div class="card-content shadow-box-mini"  style="margin-left: 50px">
          <div>
            <el-avatar :size="100"
                       src="http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg">
            </el-avatar>
          </div>
          <div class="card-right">
            <div class="card-title">
              时光相册
            </div>
            <div class="card-desc">
              📸记录美好瞬间
            </div>
          </div>
        </div>

        <div class="card-content shadow-box-mini"  style="margin-left: 50px">
          <div>
            <el-avatar :size="100"
                       src="http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg">
            </el-avatar>
          </div>
          <div class="card-right">
            <div class="card-title">
              祝福板
            </div>
            <div class="card-desc">
              📋写下对我们的祝福
            </div>
          </div>
        </div>
      </div>

      <!-- 卡片2 时光相册 -->
<!--      <photo v-show="card === 2" :photo="love.photo"></photo>-->

      <!-- 卡片3 祝福板 -->
      <comment v-show="card === 3" :comment="love.comment"></comment>
    </div>

    <!-- 家园卡片 -->
    <div id="treeHole" v-show="!$common.isEmpty(treeHoleList)">
      <treeHole :treeHoleList="treeHoleList"
                avatar="http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg"
                @launch="launch"
                @deleteTreeHole="deleteTreeHole">
      </treeHole>
    </div>
    <div class="family-wrap myCenter" v-show="card == 4">
      <div class="family-box shadow-box-mini" v-for="family in familyList" :key="family.id">
        <div class="family-back">
          <el-image class="love-image my-el-image"
                    :src="family.cover"
                    lazy
                    fit="cover">
            <div slot="error" class="image-slot"></div>
          </el-image>
        </div>

        <div class="family-title">
          <div class="family-avatar">
            <el-avatar class="family-avatar-item" :src="family.manCover"></el-avatar>
            <div class="family-name">{{family.manName}}</div>
          </div>

          <img class="family-img" :src="like" alt="心心">

          <div class="family-avatar">
            <el-avatar class="family-avatar-item" :src="family.womanCover"></el-avatar>
            <div class="family-name">{{family.womanName}}</div>
          </div>
        </div>
      </div>

      <div class="family-change">
        <proButton title="换一批" :clickButton="changeFamily"></proButton>
        <proButton title="申请入驻" @clickButton="familyVisible = true"></proButton>
      </div>
    </div>

    <!-- 表白墙弹窗 -->
    <el-dialog title="表白墙" v-model="familyVisible" width="30%">
      <div class="family-add">
        <el-input v-model="family.cover" placeholder="背景封面"></el-input>
        <el-input v-model="family.manCover" placeholder="对象一封面"></el-input>
        <el-input v-model="family.manName" placeholder="对象一名称"></el-input>
        <el-input v-model="family.womanCover" placeholder="对象二封面"></el-input>
        <el-input v-model="family.womanName" placeholder="对象二名称"></el-input>
        <el-date-picker
          v-model="family.timing"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
          style="width: 100%;"
        ></el-date-picker>
        <el-input v-model="family.countdownTitle" placeholder="倒计时标题"></el-input>
        <el-date-picker
          v-model="family.countdownTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
          style="width: 100%;"
        ></el-date-picker>
        <proButton title="确认" :clickButton="addFamily"></proButton>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import { ElImage, ElAvatar, ElDialog, ElInput, ElDatePicker } from 'element-plus';
// import photo from '@/components/Photo.vue';
import comment from '@/views/weblogFront/comment/index.vue';
import proButton from '@/views/weblogFront/proButton/index.vue';
import * as $common from "@/utils/common";
import like from '@/assets/file/like.svg'
import {useRoute, useRouter} from "vue-router";
import TreeHole from "@/views/weblogFront/common/treeHole.vue";

const love = ref({
  manCover: 'http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png',
  womanCover: 'http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png',
  manName: 'John',
  womanName: 'Jane',
  photo: [], // Array of photos
  comment: [], // Array of comments
  countdownTitle: '',
  countdownTime: '',
});


const treeHoleList = [
  {
    id: 1,
    content: '攻略.jpg',
    avatar: 'http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg',
    createTime: '2024-xx-xx xx:00:00'
  },
  {
    id: 2,
    content: '通宵的陪伴',
    avatar: 'http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg',
    createTime: '2024-12-20 11:00:00'
  },

  {
    id: 3,
    content: '相识于漂漂',
    avatar: 'http://www.starhert.top:9000/blog/2024/12/22/412a6a70f6b44fd280bf1fb0a3374c79.jpg',
    createTime: '2024-12-17 17:43:00'
  },
];

const timing = ref({
  year: 0,
  month: 0,
  day: 0,
  hour: 0,
  minute: 0,
  second: 0,
});

const card = ref(1);
const familyList = ref([]);
const familyVisible = ref(false);
const family = ref({
  cover: '',
  manCover: '',
  manName: '',
  womanCover: '',
  womanName: '',
  timing: '',
  countdownTitle: '',
  countdownTime: '',
});

const countdownChange = computed(() => {
  // Compute the countdown change logic here
  return '';
});

const route = useRoute();
const router = useRouter();
const changeCard = (cardNumber) => {
  router.push({path:"/letter"})
};

const launch = () => {
  // Logic to launch
};

const deleteTreeHole = (id) => {
  // Logic to delete tree hole
};
const changeFamily = () => {
  // Logic to change family
};

onMounted(() => {
  getLove()
  setInterval(getLove, 1000);
})
const loveTime = ref('2024-12-17 17:43:00');
const getLove=() =>{
  let diff = $common.timeDiff(loveTime.value);
  timing.value.year = diff.diffYear;
  timing.value.month = diff.diffMonth;
  timing.value.day = diff.diffDay;
  timing.value.hour = diff.diffHour;
  timing.value.minute = diff.diffMinute;
  timing.value.second = diff.diffSecond;
  console.log(timing)
};

const addFamily = () => {
  // Logic to add family
};
</script>

<style scoped>

.love-container {
  background-image: linear-gradient(to right, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px), linear-gradient(to bottom, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px);
  background-size: 3rem 3rem;
  /*background: var(--background);*/
}

.bg-wrap {
  height: 55vh;
  position: relative;
  overflow: hidden;
}

.love-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--miniMask);
}

.love-wrap {
  width: 90%;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  max-width: 950px;
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50px 70px 30px 70px;
}

.love-avatar {
  border: rgba(255, 255, 255, 0.2) 4px solid;
  width: 180px;
  height: 180px;
}

.love-title {
  margin-top: 15px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}

.love-img {
  animation: imgScale 2s linear infinite;
  width: 120px;
  height: 120px;
}

#bannerWave1 {
  height: 84px;
  background: var(--bannerWave1);
  position: absolute;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

#bannerWave2 {
  height: 100px;
  background: var(--bannerWave2);
  position: absolute;
  width: 400%;
  bottom: 0;
  z-index: 5;
  animation: gradientBG 120s linear infinite;
}

.love-content {
  max-width: 1200px;
  overflow: hidden;
  margin: 20px auto 0;
  user-select: none;
}

.love-time-title1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 4rem;
  text-align: center;
  background-image: linear-gradient(270deg, #ff4500, #ffa500, #ffd700, #90ee90, #00ffff, #1e90ff, #9370db, #ff69b4, #ff4500);
  -webkit-background-clip: text;
  animation: jianBian 60s linear infinite;
  width: 3000px;
  color: rgba(0, 0, 0, 0);
}

.love-time-title2 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 4rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.love-time1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.love-time1-item {
  font-size: 4rem;
  font-weight: 700;
}

.card-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.card-content {
  display: flex;
  padding: 25px;
  margin: 25px auto;
  border-radius: 20px;
  max-width: 780px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--background);
}

.card-content:hover,
.family-button:hover,
.family-wrap:hover {
  transform: translateY(-6px);
}

.card-right {
  margin-left: 20px;
}

.card-title {
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  line-height: 3.5rem;
  font-weight: 700;
}

.card-desc {
  font-size: 1.1rem;
  letter-spacing: 0.2rem;
  color: #777777;
}

.card-container {
  max-width: 1500px;
  margin: 20px auto 40px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}

.comment-content {
  max-width: 1000px;
  margin: 0 auto;
}

.photo-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: 2px;
}

.photo-title-warp {
  max-width: 1150px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}

.isActive {
  animation: scale 2.5s ease-in-out infinite;
}

.family-button {
  position: relative;
  overflow: hidden;
  height: 150px;
  color: var(--white);
  margin: 50px auto 15px;
  border-radius: 20px;
  max-width: 350px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--love) center center / cover no-repeat;
  user-select: none;
}

.family-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--miniMask);
}

.family-button-title {
  position: absolute;
  line-height: 150px;
  margin-left: 20px;
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}

.family-button-car {
  position: absolute;
  margin-left: 220px;
  margin-top: 55px;
  animation: passing 4s linear infinite;
}

.family-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.family-wrap {
  cursor: pointer;
  width: 350px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px 25px 5px 25px;
  margin: 20px;
  transition: all 0.3s;
  user-select: none;
}

.family-avatar {
  border: rgba(255, 255, 255, 0.2) 4px solid;
  width: 90px;
  height: 90px;
}

.family-title {
  margin-top: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}

.family-img {
  animation: imgScale 2s linear infinite;
  width: 60px;
  height: 60px;
}

.family-bottom-wrap {
  display: flex;
  justify-content: space-around;
  margin: 0 0 40px;
}

.family-bottom {
  color: var(--white);
  border-radius: 3rem;
  width: 150px;
  text-align: center;
  height: 50px;
  cursor: pointer;
  user-select: none;
}

.form-main {
  animation: hideToShow 2s;
  border-radius: 12px;
  overflow: hidden;
}

.user-content > div {
  height: 65px;
  display: flex;
  align-items: center;
}

.user-content :deep(.el-input__inner)  {
  border: none;
  height: 40px;
  width: 250px;
  background: var(--whiteMask);
}

.user-content :deep(.el-textarea__inner)  {
  border: none;
  width: 250px;
  background: var(--whiteMask);
}

.user-content :deep(.el-input__count)  {
  background: var(--transparent);
  user-select: none;
}

.form-friend {
  background-color: #eeeeee;
  padding: 20px 0;
}

.form-title {
  margin: 10px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .user-content > div {
    display: unset;
    align-items: unset;
  }
}

@media screen and (max-width: 800px) {
  .love-wrap {
    border-radius: 1.5em;
    padding: 40px 30px 10px 30px;
  }

  .love-avatar {
    width: 120px;
    height: 120px;
  }

  .love-img {
    width: 100px;
    height: 100px;
  }

  .love-time1 {
    font-size: 1.4rem;
  }

  .love-time1-item {
    font-size: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .love-wrap {
    padding: 30px 20px 10px 20px;
  }

  .love-avatar {
    width: 100px;
    height: 100px;
  }

  .love-img {
    width: 80px;
    height: 80px;
  }

  .love-time1 {
    font-size: 1rem;
  }

  .love-time1-item {
    font-size: 1.8rem;
  }

  .love-time-title2 {
    font-size: 1.2rem;
  }

  .user-content :deep(.el-textarea__inner ) {
    width: 100%;
  }

  .user-content :deep(.el-input__inner)  {
    width: 190px;
  }

  .card-container .tree-hole-container {
    padding: 0;
  }
}

@media screen and (max-width: 1150px) {
  .card-wrap {
    display: unset;
    justify-content: unset;
  }

  .photo-title-warp {
    max-width: 780px;
  }

  .family-button {
    max-width: 780px;
  }
}

</style>
